<template>
  <div class="shoppingMall">
    <!-- h2 -->
      <h3>商城</h3>
      <!-- input 框 -->
    <div class="shopping_input">
        <div class="input_box">
          <van-icon class="input_icon" name="search"  />
          <input class="input_text" type="text" placeholder="请输入药的名称">
        </div>
        <van-icon class="icon_bill" name="bill-o" />
    </div>
    <div class="home_main">
       <!-- 多练dl 和dd dt -->
        <div class="shopping_drug">
       <div class="drug_head">
          <h4 class="drug_h4">快速购药</h4>
          <span class="drug_span">安全品质保证</span>
       </div>
       <div class="drug_dls">
            <div class="drug_top">
                <dl>
                    <dt><img src="../../assets/img/shopping/shop01.jpg" alt=""></dt>
                    <dd><a href="">皮肤用药</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop02.jpg" alt=""></dt>
                    <dd><a href="">妇科用药</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop03.jpg" alt=""></dt>
                    <dd><a href="">肠胃用药</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop04.jpg" alt=""></dt>
                    <dd><a href="">呼吸用药</a></dd>
                </dl>
                 <dl>
                    <dt><img src="../../assets/img/shopping/shop05.jpg" alt=""></dt>
                    <dd><a href="">营养补充</a></dd>
                </dl>
            </div>
            <div class="drug_botton">
                <dl>
                    <dt><img src="../../assets/img/shopping/shop10.jpg" alt=""></dt>
                    <dd><a href="">家庭备用</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop06.jpg" alt=""></dt>
                    <dd><a href="">耳鼻咽喉</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop07.jpg" alt=""></dt>
                    <dd><a href="">男科用药</a></dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/shopping/shop08.jpg" alt=""></dt>
                    <dd><a href="">骨科用药</a></dd>
                </dl>
                 <dl>
                    <dt><img src="../../assets/img/shopping/shop09.jpg" alt=""></dt>
                    <dd><a href="">心脑写管</a></dd>
                </dl>
            </div>
       </div>
    </div>
    <!-- 轮播图 -->
        <div class="swipe_box">
            <div class="swipe-list">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item>1</van-swipe-item>
                  <van-swipe-item>2</van-swipe-item>
                  <van-swipe-item>3</van-swipe-item>
                  <van-swipe-item>4</van-swipe-item>
                </van-swipe>
            </div>
        </div>
      <div class="treatment">
          <div class="drug_head">
              <h4 class="drug_h4">医我看</h4>
              <span class="drug_span">名医好物推荐</span>
          </div>
          <div class="ment_img">
                <img src="../../images/1_05.jpg" alt="">
          </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
})
</script>

<style lang="scss" scoped>
.shoppingMall{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  h3{
    text-align: center;
  }
}
.home_main{
  flex: 1;
  overflow-x: scroll;
}
.shopping_input{
  width: 100%;
  height:0.62rem;
  margin-top: 0.3rem;
  display: flex;
  .input_box{
    width: 6.18rem;
    height: 0.62rem;
    // background-color: white;
    border-radius: 0.5rem;
    margin-left: 0.28rem;
    background-color: #f5f5f5;
    .input_icon{
      line-height: 0.62rem;
      margin-left: 0.24rem;
    }
    .input_text{
      width: 4rem;
      height: 0.6rem;
      border: none;
      margin-left: 0.14rem;
       background-color: #f5f5f5;
    }
  }
  .icon_bill{
    font-size: 0.42rem;
    margin-left: 0.26rem;
    margin-top: 0.1rem;
  }
}
.shopping_drug{
    height: 3.7rem;
    margin-top: 0.4rem;
    .drug_head{
      height: 0.4rem;
      display: flex;
      margin-left: 0.28rem;
      .drug_span{
        background-color: #ffede5;
        font-size: 0.12rem;
        color: #fc594f;
        border-radius: 0.1rem;
        line-height: 0.4rem;
        margin-left: 0.15rem;
      }
    }
  .drug_dls{
    height: 2.94rem;
    margin-top: 0.4rem;
    .drug_top{
      height: 1.3rem;
      display: flex;
      margin-left: 0.4rem;
       dl{
        width: 1rem;
        height: 1.28rem;
       margin-left: 0.3rem;
        dt{
          width: 0.9rem;
          height: 0.9rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        dd{
          font-size: 0.24rem;
          a{
            color: #000;
          }
        }
      }
    }
    .drug_botton{
      height: 1.3rem;
      display: flex;
      margin-left: 0.4rem;
      margin-top: 0.3rem;
       dl{
        width: 1rem;
        height: 1.28rem;
       margin-left: 0.3rem;
        dt{
          width: 0.9rem;
          height: 0.9rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        dd{
          font-size: 0.24rem;
          a{
            color: #000;
          }
        }
      }
    }
  }
}
.swipe_box{
  height: 1.92rem;
  margin-top: 0.55rem;
  .swipe-list{
    width: 6.9rem;
    height: 1.92rem;
    background-color: white;
    margin-left: 0.28rem;
      .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height:1.92rem;
          text-align: center;
          background-color: tomato;
      }
  }
}
.treatment{
  height: 4.8rem;
  // background-color: #ccc;
  margin-top: 0.56rem;
    .drug_head{
      height: 0.4rem;
      display: flex;
      margin-left: 0.28rem;
      .drug_span{
        background-color: #ffede5;
        font-size: 0.12rem;
        color: #fc594f;
        border-radius: 0.1rem;
        line-height: 0.4rem;
        margin-left: 0.15rem;
      }
    }
    .ment_img{
      width: 6.96rem;
      height: 4.17rem;
      background-color: white;
      margin-left: 0.28rem;
      margin-top: 0.22rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
}
</style>
